import { useEffect, useMemo, useState } from 'react'
import './index.scss'
import axios from '../../api/index'
import NavBar from '../../extract/index'
import { useParams, useSearchParams } from 'react-router-dom'

// 定义药品数据类型
interface DrugData {
  component?: string
  taboo?: string
  effect?: string
  usage?: string
  shape?: string
  packing?: string
  sideEffects?: string
  minMatter?: string
  approvalNumber?: string
}

function Ypxq() {
  const [data, setData] = useState<DrugData | null>(null)
  const { id } = useParams()
  const [name] = useSearchParams()
  const nameSpj = useMemo(() => Object.fromEntries(name), [name])
  // 药品详情页面
  useEffect(() => {
    axios.get('/share/knowledgeBase/v1/findDrugsKnowledge', {
      params: {
        id: id
      }
    }).then(res => {
      console.log(res);
      setData(res.data.result)
    })
  }, [id])

  return (
    <div className='ypxq'>
      <div>
        <NavBar />
      </div>
      <div className='mk'>
        <span className='mk-list' >本模块知识仅供参考，如有需要，请在医生指导下使用</span>
      </div>
      <div className='zzxq'>
        <h3 className='bt'>{nameSpj.title}</h3>
        <p className='yyjy'>[药品成分]</p>
        <p className='jyxq'>{data?.component ? <span>{data.component}</span> : <span>暂无</span>}</p>
        <p className='yyjy'>[用药禁忌]</p>
        <p className='jyxq'>{data?.taboo ? <span>{data.taboo}</span> : <span>暂无</span>}</p>
        <p className='yyjy'>[功能主治]</p>
        <p className='jyxq'>{data?.effect ? <span>{data.effect}</span> : <span>暂无</span>}</p>
        <p className='yyjy'>[用法用量]</p>
        <p className='jyxq'>{data?.usage ? <span>{data.usage}</span> : <span>暂无</span>}</p>
        <p className='yyjy'>[药品性状]</p>
        <p className='jyxq'>{data?.shape ? <span>{data.shape}</span> : <span>暂无</span>}</p>
        <p className='yyjy'>[包装规格]</p>
        <p className='jyxq'>{data?.packing ? <span>{data.packing}</span> : <span>暂无</span>}</p>
        <p className='yyjy'>[不良反应]</p>
        <p className='jyxq'>{data?.sideEffects ? <span>{data.sideEffects}</span> : <span>暂无</span>}</p>
        <p className='yyjy'>[注意事项]</p>
        <p className='jyxq'>{data?.minMatter ? <span>{data.minMatter}</span> : <span>暂无</span>}</p>
        <p className='yyjy'>[批准文号]</p>
        <p className='jyxq'>{data?.approvalNumber ? <span>{data.approvalNumber}</span> : <span>暂无</span>}</p>
      </div>
    </div>
  )
}

export default Ypxq